<template>
  <div>
    <Layout>
      <div class="tags">
        <router-link :to="`/labels/edit/${tag.id}`" v-for="tag in tags" :key="tag.id" class="tag">
          <span>{{ tag.name }}</span>
          <Icon id="icon" name="right"></Icon>
        </router-link>
      </div>
      <div class="newTag-wrapper">
        <Button class="newTag" @click="addTag">新建标签</Button>
      </div>
    </Layout>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Component } from "vue-property-decorator";
import tagListModel from "@/models/tagListModel";
import Button from "@/components/Button.vue";
tagListModel.fetch();
@Component
export default class Labels extends Vue {
  tags = tagListModel.data;
  addTag(){
    const name = prompt('请输入标签名')
    if(name){
        const msg = tagListModel.add(name)
        if(msg === 'duplicated'){
            alert('标签名已重复')
        }else if(msg==='success'){
            alert('标签名创建成功')
        }
        // try{
        //     tagListModel.add(name)
        // }catch(error){
        //     if(error){
        //         alert('标签名已重复')
        //     }
            
        // }
        // this.tags.push(name)
    }
  }
}
</script>

<style lang="scss" scoped>
.tags {
  background-color: white;
  font-size: 16px;
  padding-left: 16px;
  > .tag {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;
    #icon {
      width: 18px;
      height: 18px;
      color: #666;
      margin-right: 16px;
      margin-top: -12px;
    }
  }
}
.newTag {
  background-color: #767676;
  color: white;
  border-radius: 4px;
  border: none;
  font-size: 14px;
  width: 70px;
  height: 30px;
  line-height: 30px;
  &-wrapper {
    text-align: center;
    padding: 16px;
    margin-top: 28px;
  }
}
</style>
